window.onload = function () {
    // 获取元素
    let list = document.querySelector(".list");
    let pagination = document.querySelector(".pagination");
    let pageSize = 20;
    let index = 1;

    // 因为分页需要 获取数据的总数量来决定页数
    // 刚进入页面的时候第一次请求的数据 
    getData(index);
    async function getData(index) {
        let res = await pAjax({
            url: "../api/getData.php",
            data: {
                index: index,
                len: pageSize,
            },
        });
        res = JSON.parse(res);
        console.log(res);
        // 需要把商品列表存在 本地存储中
        localStorage.setItem('dataList', JSON.stringify(res.list))
        
        // 渲染列表页
        render(res.list);

        // 因为当页数不是第一页的是说明已经 显示了分页 不需要再次分页
        if (index != 1)  return
        
        // 分页
        new Pagination(pagination, {
            pageInfo: {
                pagenum: 1,
                pagesize: pageSize, // 20
                total: res.total, //921
                totalpage: Math.ceil(res.total / pageSize),
            },
            textInfo: {
                first: "首页",
                prev: "上一页",
                next: "下一页",
                last: "末页",
            },
            change: function (idx) {
                getData(idx);
                // 需要滚动条设置在顶部
                scrollTo({top:0})
            }
        });
    }
    

    function render(data) {
        let str = "";
        data.forEach((item) => {
            str += `<div class="list-nav">
                <ol class="breadcrumb">
                    <li><a href="#">${item.cat_one_id}</a></li>
                    <li><a href="#">${item.cat_two_id}</a></li>
                    <li class="active">${item.cat_three_id}</li>
                </ol>
                <div class="row">
                    <div>
                        <div class="thumbnail">
                            <img
                                src="${item.goods_small_logo}"
                                alt="..."
                            />
                            <div class="caption">
                                <p class="title">${item.goods_name}</p>
                                <p class="price">
                                    <span class="glyphicon glyphicon glyphicon-jpy" aria-hidden="true"></span>
                                    <span>${item.goods_price}</span>
                                </p>
                                <p>
                                    <a
                                        href="./cart.html"
                                        class="btn btn-primary"
                                        role="button"
                                    >
                                        查看购物车
                                    </a>
                                    <a
                                        href="./details.html?id=${item.goods_id}"
                                        class="btn btn-info"
                                        role="button"
                                    >
                                        查看详情
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
        });
        list.innerHTML = str;
    }
};
